<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NexMagic Scholar</title>
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/scholar/scholar.css" rel="stylesheet">
</head>
<body class="bg-body2" style="overflow: hidden">

<article style="width: 50%">
    <!--<span class="dataTips"><p class="field">Field</p>8824</span>
    <span class="dataTips"><p class="expert">Expert growth</p>8824</span>
    <span class="dataTips"><p class="periodical">Periodical</p>8824</span>
    <span class="dataTips"><p class="paper">Paper</p>8824</span>-->
    <p class="imgSpeed" id="imgSpeed" style="width: 100%;height:0px;font-size: 0px;position: fixed;z-index: 2000;"></p>
</article>

<div class="echarts-gl-box">
    <div class="earch-gl" id="earth-gl"></div>
</div>
<div class="form-group">
    <div class="search-title">
        NexMagic Scholar
    </div>
    <form class="search-input row" id="box">
        <div class="col-md-8">
            <input type="text" class="form-control" placeholder="TEXT HERE" id="keyword" @keydown="get($event)"/>
        </div>
        <div class="col-md-4 search-btn">
            <button type="button" class="btn-control" style="outline:0;" @click="search()" id="search-btn"><p>
                Search</p><i class="fa fa-arrow-right"></i></button>
        </div>
        <div class="hotWords">
            <p @click="search('machine learning')">machine learning</a></p>
            <p @click="search('data mining')">data mining</p>
            <p @click="search('Artificial Intelligence')">Artificial Intelligence</p>
            <p @click="search('computer')">computer</p>
        </div>
        <!--<ul class="go-search-box">
            &lt;!&ndash;<li>张剑</li>
            <li>张剑</li>
            <li>张剑</li>
            <li>张剑</li>&ndash;&gt;
        </ul>-->
    </form>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/echarts/echarts.min.js"></script>
<script src="../js/echarts/echarts-gl.min.js"></script>
<script src="../js/img-speed.js" type="text/javascript" charset="utf-8"></script>
<script>
    window.onload = function () {
        var imgs = ['<img src="../img/earth/gongshi1.png"/>', '<img src="../img/earth/gongshi2.png"/>'];
        var neontext = new Neontext("imgSpeed", imgs);
        neontext.render.run();

        new Vue({
            el: '#box',
            data: {},
            methods: {
                get: function (ev) {
                    if (ev.keyCode == 38 || ev.keyCode == 40) return;

                    if (ev.keyCode == 13) {
                        this.search()
                    }
                },
                search: function (hotWord) {
                    var keyword = hotWord == undefined ? $("#keyword").val().trim() : hotWord;
                    var keywordArr = keyword.split(" ");
                    keyword = "";
                    for(var i in keywordArr) {
                        keyword += keywordArr[i].substring(0,1).toUpperCase() + keywordArr[i].substring(1) + (i == keywordArr.length ? '' : ' ');
                    }
                    if (keyword != null && keyword.length > 0) {
                        $("#search-btn").focus();
                        window.location.href = "searchList.html?keyword=" + keyword;
                    } else {
                        $("#keyword").val("")
                        alert("请输入搜索关键字！");
                    }
                }
            }
        });
    };

    var myChart = echarts.init(document.getElementById("earth-gl"));
    myChart.setOption({
        globe: {
            baseTexture: '../img/earth/world-fff-max.png',
            /*heightTexture: '../img/earth/world-fff-faxian.png',*/
            environment: 'none',
            displacementScale: 0.02,
            shading: 'realistic',
            realisticMaterial: {
                roughness: 0.8
            },
            layers: [{
                // 更新 name 为 'cloud' 的层的纹理
                name: 'cloud',
                texture: '../img/earth/world-fff-faxian2.png',
                show: true,
                type: 'overlay',
                distance: 16
            }, {
                // 更新 name 为 'cloud' 的层的纹理
                name: 'xyz',
                texture: '../img/earth/xyz-bg.png',
                show: true,
                type: 'overlay',
                distance: 25
            }],
            left: 80,
            light: {
                main: {
                    intensity: 0
                },
                ambient: {
                    color: '#c5dcd9',
                    intensity: 1.1,
                }

            },
            postEffect: {
                enable: false
            },
            viewControl: {
                /*alpha: 90,*/
                distance: 220,
                autoRotate: true, // 视角公转
                autoRotateDirection: 'ccw', // 从上往下看为逆时针方向
                zoomSensitivity: 0, // 控制缩放，
                damping: 0.95, // 鼠标旋转后，视角惯性运动
                autoRotateSpeed: 4 // 自转速度
            },
        },
        series: [{
            type: 'scatter3D',
            globeIndex: 1,
            coordinateSystem: 'globe',
            symbol: 'pin', // 散点形状
            symbolSize: 25, // 大小
            itemStyle: {
                color: 'blue',
                borderWidth: 0.2,
                borderColor: '#fff'
            },
            label: {
                color: "black",
                show: true,
                distance: 5,//标签与散点的距离，默认5
                position: 'top',// 位置，默认right，有top，bottom，left
                textStyle: {
                    color: "#000",
                    backgroundColor: "rgba(255,255,255,0.8)",
                    fontSize: 16
                },
                formatter: function (params) {
                    return params.name + "  \n" + "   " + params.value[3]
                }
            },
            data: [
                {
                    name: 'Experts',
                    value: [89.45, 27.31, 0, "110,367,514"],
                    itemStyle: {
                        color: '#0090ff',
                    }
                }, {
                    name: 'Papers',
                    value: [-47.55, -15.47, 0, "166,192,182"],
                    itemStyle: {
                        color: '#ffb400',
                    }
                }, {
                    name: 'Journals',
                    value: [-75.42, 45.27, 0, "45,278"],
                    itemStyle: {
                        color: '#9c5aff',
                    }
                }, {
                    name: 'Conferences',
                    value: [116.20, 39.55, 0, "3,800"],
                    itemStyle: {
                        color: '#00f9d9',
                    }
                }, {
                    name: 'Books',
                    value: [-82.22, 23.08, 0, "302,113"],
                    itemStyle: {
                        color: '#0090ff',
                    }
                }, {
                    name: 'Patents',
                    value: [-78.35, -0.15, 0, "70,366,542"],
                    itemStyle: {
                        color: '#ffb400',
                    }
                }, /*{
                    name: 'Fund',
                    value: [9.26, 16, 0, "-"],
                    itemStyle: {
                        color: '#9c5aff',
                    }
                }, {
                    name: 'Awards',
                    value: [132.13, -22, 0, "-"],
                    itemStyle: {
                        color: '#00f9d9',
                    }
                },*/ {
                    name: 'Institutions',
                    value: [55.13, 49.37, 0, "23,889"],
                    itemStyle: {
                        color: '#0090ff',
                    }
                }, {
                    name: 'Fields',
                    value: [31.02, -0.43, 0, "216,155"],
                    itemStyle: {
                        color: '#ffb400',
                    }
                }
            ]
        },{
            type: 'lines3D',
            coordinateSystem: 'globe',
            effect: {
                show: true,
                trailWidth: 3,
                trailOpacity: 1,
                trailLength: 0.3,
                constantSpeed: 12,
                trailColor: "#0000ff"
            },

            blendMode: 'lighter',
            lineStyle: {
                width: 1.2,
                opacity: 0.5,
                color: "#136867"
            },
            data: [
                [[116.20, 39.55], [89.45, 27.31]],
                [[116.20, 39.55], [55.13, 49.37]],
                /*[[89.45, 27.31], [132.13, -22]],
                [[116.20, 39.55], [132.13, -22]],*/
                /*[[-47.55, -15.47], [9.26, 16]],*/
                [[-47.55, -15.47], [31.02, -0.43]],

                [[-78.35, -0.15], [-47.55, -15.47]],
                [[-78.35, -0.15], [-82.22, 23.08]],
                [[-78.35, -0.15], [-75.42, 45.27]],
                [[31.02, -0.43], [89.45, 27.31]]
            ]
        }]
    });
</script>
</body>
</html>